<template>
   <div class="article-comment">
     <!-- 全部评论 -->
     <van-sticky offset-top="11.73333vw">
       <div class="title van-hairline--bottom">
         <span>全部评论 ({{ArticleList.comm_count}})</span>
         <span>{{ArticleList.like_count}} 点赞</span>
       </div>
     </van-sticky>
     <!-- 评论列表 -->
     <div class="list">

      <van-list
         :error.sync="error"
         error-text="请求失败，点击重新加载"
         v-model="loading"
         :finished="finished"
         finished-text="没有更多了"
         @load="onLoad"
      >
       <div class="item van-hairline--bottom" v-for="item in commentList" :key="item.com_id">
         <van-image round width="10vw" height="10vw" :src="item.aut_photo"/>
         <div class="info">
           <p>
             <span class="name">{{item.aut_name}}</span>
             <span class="zan">
               {{item.like_count}}
               <i class="iconfont icon-like2"
               :class="item.is_liking ? 'icon-like-sel' : 'icon-like2'"/>
             </span>
           </p>
           <p class="cont">{{item.content}}</p>
           <p>
             <span class="reply" @click="clickReply(item)">{{ item.reply_count }}回复 <i class="van-icon van-icon-arrow"></i></span>
             <span class="time">{{item.pubdate | relativeTime}}内</span>
           </p>
         </div>
       </div>
      </van-list>

     </div>
     <!-- 底部工具 -->
    <div class="footer van-hairline--top">
      <div class="input" @click="showInput = true"><i class="van-icon van-icon-edit"></i></div>
      <div class="btn" @click="$emit('click-comment')">
        <i class="iconfont icon-comment"></i>
        <p>评论</p>
        <i v-if="ArticleList.comm_count">{{ArticleList.comm_count}}</i>
      </div>
      <div class="btn" @click="likeAuthor">
        <i class="iconfont"
         :class="ArticleList.attitude === 1 ? 'icon-like-sel' : 'icon-like'"></i>
        <p>点赞</p>
      </div>
      <div class="btn" @click="collectAuthor">
        <i  class="iconfont"
          :class="ArticleList.is_collected ? 'icon-collect-sel' : 'icon-collect'"></i>
        <p>收藏</p>
      </div>
      <div class="btn">
        <i class="iconfont icon-share"></i>
        <p>分享</p>
      </div>
    </div>
     <!-- 回复弹层 -->
     <van-popup v-model="reply.open" position="right" @closed="currComments = {}">
      <!-- 头 -->
      <van-nav-bar
        left-arrow
        @click-left="reply.open = false"
        :title="`${currComments.reply_count}条回复`"
      />
      <div class="reply-wrapper list">
        <!-- 列表 -->
        <van-list
         :error.sync="reply.error"
         error-text="请求失败，点击重新加载"
         v-model="reply.loading"
         :finished="reply.finished"
         finished-text="没有更多了"
         @load="replyOnload"
         :immediate-check="false"
      >
        <div class="item van-hairline--bottom" v-for="item in reply.replyList" :key="item.com_id">
          <van-image
            round
            width="10vw"
            height="10vw"
            :src="item.aut_photo"
          />
          <div class="info">
            <p>
              <span class="name">{{item.aut_name}}</span>
              <span class="zan">{{item.like_count}} <i class="iconfont icon-like2" ></i></span>
            </p>
            <p class="cont">{{item.content}}</p>
            <p><span class="time" style="margin-left: 0">{{item.pubdate | relativeTime}}</span></p>
          </div>
        </div>
        </van-list>
      </div>
      <!-- 底 -->
      <div class="footer van-hairline--top" style="position: static">
        <div class="input big" @click="showInput = true"><i class="van-icon van-icon-edit"></i></div>
        <div class="btn">
          <i class="iconfont icon-collect"></i>
          <p>收藏</p>
        </div>
        <div class="btn">
          <i class="iconfont icon-share"></i>
          <p>分享</p>
        </div>
      </div>
    </van-popup>

    <!-- 评论&回复弹层 -->
    <van-popup v-model="showInput" position="bottom">
      <van-nav-bar
        left-arrow
        @click-left="showInput = false"
        :title="currComments.com_id?'回复评论':'发表评论'"
        right-text="发表"
        @click-right="submit()"
      />
      <van-field
        v-model="text"
        rows="3"
        autosize
        type="textarea"
        maxlength="100"
        :placeholder="currComments.com_id?`@${currComments.aut_name}`:'请输入评论'"
        show-word-limit
      />
    </van-popup>
   </div>
 </template>

<script>
import { postCommentArticle, getReplyByArticle, getCommentsByArticle, getLikesByArticle, collectArticle } from '@/api/article'
export default {
  name: 'ArticleComment',
  props: {
    ArticleList: {
      require: true,
      default: () => {}
    }
  },
  data () {
    return {
      // 显示输入弹窗
      showInput: false,
      // 输入框值
      text: '',
      // 回复业务需要的数据
      currComments: {},
      reply: {
        open: false,
        offset: null,
        replyList: [], // 回复列表
        error: false, // 错误信息
        loading: false, // 加载状态
        finished: false // 完成加载
      },
      offset: null,
      commentList: [], // 评论列表
      error: false, // 错误信息
      loading: false, // 加载状态
      finished: false // 完成加载
    }
  },
  created () {
    // 开启加载中效果
    this.loading = true
    this.onLoad()
  },
  methods: {
    // 新增评论回复
    async submit () {
      if (!this.currComments.com_id) {
        if (!this.text) return this.$toast('请输入评论')
        const [err, res] = await postCommentArticle(this.ArticleList.art_id, this.text)
        if (err) return this.$toast.fail('评论失败')
        console.log(res)
        this.commentList.unshift(res.data.data.new_obj)
        // eslint-disable-next-line vue/no-mutating-props
        this.ArticleList.comm_count++
        this.showInput = false
        this.text = ''
        this.$toast.success('评论成功')
      } else {
        if (!this.text) return this.$toast('请回复评论')
        const [err, res] = await postCommentArticle(this.currComments.com_id, this.text, this.ArticleList.art_id)
        if (err) return this.$toast.fail('评论失败')
        console.log(res)
        this.reply.replyList.unshift(res.data.data.new_obj)
        // eslint-disable-next-line vue/no-mutating-props
        this.currComments.reply_count++
        this.showInput = false
        this.text = ''
        this.$toast.success('回复成功')
      }
    },
    //  回复下拉加载
    async replyOnload () {
      // 发请求，获取数据
      const [err, res] = await getReplyByArticle(this.currComments.com_id, this.reply.offset)
      // 如果有错误
      if (err) {
        // 设置错误状态 -> 显示错误效果
        this.reply.error = true
        // 否则 -> 请求成功
      } else {
        // 追加评论数据
        this.reply.replyList.push(...res.data.data.results)
        // 判断这是最后一条ID和所有数据最后一条id相同 无数据了
        if (res.data.data.end_id === res.data.data.last_id) {
          this.reply.finished = true
        } else {
          // 记录偏移量，为下次请求准备
          this.reply.offset = res.data.data.last_id
        }
      }
      // 不管成功失败，都要结束加载状态
      this.reply.loading = false
    },
    // 回复弹层
    clickReply (item) {
      // 记录当前评论
      this.currComments = item
      // 打开评论弹窗
      this.reply.open = true
      // 重置错误状态
      this.reply.error = false
      // 重置加载完毕
      this.reply.finished = false
      // 重置数据
      this.reply.replyList = []
      // 重置请求参数
      this.reply.offset = null
      /* 优化回复弹层BUg */
      // 先标记加载中的状态
      this.reply.loading = true
      // 再手动触发加载数据
      this.replyOnload()
    },
    // 点赞或取消点赞
    async collectAuthor () {
      // console.log(this.ArticleList)
      if (this.ArticleList.is_collected) {
        const [err] = await collectArticle(this.ArticleList.art_id, false)
        if (err) return this.$toast.fail('操作无效')
        // eslint-disable-next-line vue/no-mutating-props
        this.ArticleList.is_collected = false
        this.$toast.success('取消成功')
      } else {
        const [err] = await collectArticle(this.ArticleList.art_id, true)
        if (err) return this.$toast.fail('操作无效')
        // eslint-disable-next-line vue/no-mutating-props
        this.ArticleList.is_collected = true
        this.$toast.success('收藏成功')
      }
    },
    // 点赞或取消点赞
    async likeAuthor () {
      // console.log(this.ArticleList)
      if (this.ArticleList.attitude === 1) {
        const [err] = await getLikesByArticle(this.ArticleList.art_id, false)
        if (err) return this.$toast.fail('操作无效')
        // eslint-disable-next-line vue/no-mutating-props
        this.ArticleList.attitude = -1
        this.$toast.success('取消成功')
      } else {
        const [err] = await getLikesByArticle(this.ArticleList.art_id, true)
        if (err) return this.$toast.fail('操作无效')
        // eslint-disable-next-line vue/no-mutating-props
        this.ArticleList.attitude = 1
        this.$toast.success('点赞成功')
      }
    },
    // 下拉加载
    async onLoad () {
      console.log(123)
      // 发请求，获取数据
      console.log(this.ArticleList)
      const [err, res] = await getCommentsByArticle(this.ArticleList.art_id, this.offset)
      // 如果有错误
      if (err) {
        // 设置错误状态 -> 显示错误效果
        this.error = true
        // 否则 -> 请求成功
      } else {
        // 判断这是最后一条ID和所有数据最后一条id相同 无数据了
        if (res.data.data.last_id === res.data.data.end_id) {
          this.finished = true
        } else {
          // 记录偏移量，为下次请求准备
          this.offset = res.data.data.last_id
        }
        // 追加评论数据
        this.commentList.push(...res.data.data.results)
      }
      // 不管成功失败，都要结束加载状态
      this.loading = false
    }
  }
}
</script>

 <style scoped lang="less">
 .article-comment {
   .title {
     height: 50px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 0 16px;
     background: #fff;
     span {
       font-size: 16px;
       &:last-child {
         color: #ccc;
         font-size: 14px;
       }
     }
   }
   .list {
     padding: 0 16px;
     .item {
       display: flex;
       padding: 10px 0;
       .info {
         padding-left: 10px;
         flex: 1;
         p {
           margin: 0;
           .name {
             font-size: 16px;
           }
           .zan {
             font-size: 14px;
             float: right;
             color: #999;
             .i {
               font-size: 12px;
               position: relative;
               top: -1px;
             }
           }
           &.cont {
             font-size: 14px;
             color: #666;
             padding: 10px 0;
             word-break: break-all;
             padding-right: 40px;
           }
           .reply {
             min-width: 60px;
             height: 24px;
             text-align: center;
             line-height: 28px;
             font-size: 12px;
             background: @geek-gray-color;
             display: inline-block;
             border-radius: 14px;
             color: #666;
             .van-icon {
               position: relative;
               top: 1px;
             }
           }
           .time {
             font-size: 12px;
             color: #999;
             margin-left: 10px;
           }
         }
       }
     }
   }
   .footer {
    position: fixed;
    left: 0;
    bottom: 0;
    height: 50px;
    background: #fff;
    display: flex;
    width: 100%;
    align-items: center;
    .input {
      &.big {
       width: 100%;
       margin-right: 10px;
     }
      margin-left: 10px;
      width: 200px;
      height: 34px;
      background: @geek-gray-color;
      border-radius: 17px;
      line-height: 36px;
      padding-left: 10px;
      .van-icon {
        color: #999;
      }
    }
    .btn {
      flex: 1;
      text-align: center;
      position: relative;
      p {
        margin: 0;
        font-size: 10px;
      }
      .iconfont {
        font-size: 18px;
      }
      i:not(.iconfont) {
        height: 16px;
        min-width: 16px;
        padding: 0 3px;
        background: @geek-color;
        color: #fff;
        font-size: 10px;
        position: absolute;
        right: 0;
        top: -4px;
        line-height: 16px;
        border-radius: 8px;
        font-style: normal;
      }
    }
  }
  .van-popup {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.reply-wrapper {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}
::v-deep .van-nav-bar__text {
  color: @geek-color;
}
::v-deep .van-field__control {
  background: @geek-gray-color;
  padding: 5px 10px;
  margin-bottom: 5px;
  border-radius: 4px;
}
 }
 </style>
